<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
        <title>
            允许提货详情
        </title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    
        </script>
        <!-- 引入 layui.css -->
    <link href="./css/layui.css" rel="stylesheet" />

    <!-- 引入 layui.js -->
    <script src="./js/layui.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/constant.js" ></script>
    <script src="./js/data.js"></script>
    <script src="./js/userAuth.js"></script>
    <script src="./js/request.js"></script>
    <script type="text/javascript">    


        var responseData = {};

        function submit(){
            // 
            const li = layer.load();
            const clickData = responseData.list[0].Rows[0];
            $.ajax({
                url : REQUEST_URL ,
                headers : REQUEST_HEADERS(),
                data:JSON.stringify({action : "OrderConfirmMsg","OrderName":clickData.DJMC,"OrderNo" : clickData.DJH,"CarNum":clickData.CPH,"UserName" : clickData.THR}),
                type : "post",
                contentType:"application/json",
                success:function(r,t,x){
                    layer.close(li)
                    layer.confirm(r.message,{
                    icon : 3,
                    title : "提示"
                    },
                    function(index){
                        confirm(responseData.list[0].Rows[0],index)   
                    })
                },
                error:function(){
                    layer.close(li)
                }
            })
            // layer.confirm("提示",{
            //         icon : 3,
            //         title : "收货确认"
            //     },
            //     function(index){
            //         confirm(responseData.list[0].Rows[0],index)   
            //     })
        }

        function confirm(data,confirmIndex){
            const loadingIndex = layer.load();
            $.ajax({
                url : REQUEST_URL,
                method : "post",
                data : JSON.stringify({action : "OrderConfirm",OrderName:data.DJMC,OrderNo:data.DJH,UserName:data.THR,CarNum:data.CPH}),
                type : "post",
                headers : REQUEST_HEADERS(),
                contentType:"application/json",
                success:function(res,t,x){
                    layer.close(loadingIndex)
                    if(res.code == 200){
                        layer.close(confirmIndex);    
                        loadData()
                    }
                    // const res = responseHandler(r,t,x);
                    layer.msg(res.message)
                    
                },
                error:function(){
                    layer.close(loadingIndex);
                }
            })
        }

        function render(data){
            // 获取其中一行中的数据作为表头
            const header = data.list[0].Rows[0];
            const detail = data.list[0].Rows;
            console.log("render")
            if(header){
                const {DJH,DJMC,XSDW,THRQ,KSMC,THR,CPH,HJSL,ZT,ZTXS,YXRY,YXSJ,PM,PH,DJ,GG,THSL,DW} = header;
                Object.keys(header).forEach(item=>{
                    $("#"+item).text(header[item])
                })
                $(".detail-content").children().remove();
                
                detail.forEach(item=>{
                    const ele = `
                <div class="header-item" style="border-bottom: 1px dashed rgb(244,244,244);font-size:13px">
                        <div class="detail-item-column">
                           ${item.PM}</br/>${item.DJ}
                        </div>
                        <div class="detail-item-column" style="flex-direction:column;text-align:right;">
                           <div>${item.GG}</div><div>${item.PH}</div>
                        </div>
                        <div class="detail-item-column" style="justify-content: flex-end;">
                            ${item.THSL}${DW}
                        </div>
                    </div>
                `
                    $(".detail-content").append(ele)
                })

                $("#HJSL").text(HJSL+DW)
                $("#title").text(KSMC)
                $("#confirm-btn").css({"display":ZT=='DQR'?"":"none","margin-left":ZT=="DQR"?"20px":""})
            }else{
                layer.open({
                    title : "错误提示",
                    content : "单据明细不存在"
                })
            }
        }

        function onClickBack(){
            history.back(-1);
        }

        function loadData(){
            const orderNo = getUrlParam("orderNo");
            const orderName = getUrlParam("orderName");
            const type = getUrlParam("type");
            var loadingIndex = layer.load();
            $.ajax({
                url : REQUEST_URL,
                method : "post",
                data:JSON.stringify({action : "GetOrderDetail",OrderNo:orderNo,OrderName:orderName,type:type}),
                type:"json",
                contentType:"application/json",
                headers:REQUEST_HEADERS(),
                success:function(r,t,x){
                    layer.close(loadingIndex)
                    const res = responseHandler(r,t,x);
                    if(res.code == 200){
                        responseData = res;
                        render(res)
                    }else{
                        layer.msg(res.message);
                    }
                },
                error:function(x,s,e){
                    layer.close(loadingIndex)
                    layer.msg(s)
                }
            })
        }
        
        $(document).ready(()=>{
            init();
            const orderNo = getUrlParam("orderNo");
            $("#orderNo").text(orderNo)
            loadData();
            $("#confirm-btn").click(function(e){
                submit()
            })
        })
    </script>
    <style>
        .header-title {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            padding: 10px 0px;
            font-size: 18px;
        }
        body {
            background-color: rgb(244, 244, 244);
        }
        .bg {
            background-color: white;
            border-radius: 10px;
            padding: 10px;
            /* margin-top: 10px; */
        }
        #data-container{
            padding: 10px;
        }
        .header-item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-bottom: 1px solid rgb(240,240,240);
            padding: 10px 0px;
            
        }
        .header-item-value{
            color: gray;
        }
        .detail-item-column {
            display: flex;
            flex:1;
            /* flex-direction: column; */
            /* align-items: center;
            justify-content: center;
            text-align: center; */
        }
        .footer {
            display: flex;
            flex-direction: row;
            padding: 20px;
            justify-content: space-between;
        }
        .footer-btn {
            border: 1px solid rgb(229,86,77);
            text-align: center;
            width: 150px;
            border-radius: 20px;
            height: 40px;
            flex:1;
            line-height: 40px;
            font-size: 17px;
        }
        .footer-back{
    
            color: rgb(229,86,77);
            background-color: white;
    
        }
        .footer-submit {
            color: white;
            background-color: rgb(229,86,77);
        }
    </style>
    </head>
    <body>
        <div id="data-container">
            <!-- 表头部分 -->
            <div class="bg">
                <div class="header-title">
                    
                    <div id="title"></div>
                    
                </div>
                <div class="header-item">
                    <div class="header-item-title">销售单位</div>
                    <div class="header-item-value" id="XSDW"></div>
                </div>
                <div class="header-item">
                    <div class="header-item-title">发货单号</div>
                    <div class="header-item-value" id="DJH"></div>
                </div>
                <div class="header-item">
                    <div class="header-item-title">提货人员</div>
                    <div class="header-item-value" id="THR"></div>
                </div>
                <div class="header-item">
                    <div class="header-item-title">车牌号码</div>
                    <div class="header-item-value" id="CPH"></div>
                </div>
                <div class="header-item">
                    <div class="header-item-title">发货日期</div>
                    <div class="header-item-value" id="THRQ"></div>
                </div>
                <div class="header-item">
                    <div class="header-item-title">单据状态</div>
                    <div class="header-item-value" id="ZTXS"></div>
                </div>
                <div class="header-item">
                    <div class="header-item-title">允许人员</div>
                    <div class="header-item-value" id="YXRY"></div>
                </div>
                <div class="header-item" style="border-bottom: none;">
                    <div class="header-item-title">允许时间</div>
                    <div class="header-item-value" id="YXSJ"></div>
                </div>
            </div>
            <!-- 表体部分 -->
            <div class="bg" style="margin-top: 10px;">
                <div class="header-item" style="border-bottom: 1px dashed rgb(244,244,244);">
                    <div class="detail-item-column">
                        品名/等级
                    </div>
                    <div class="detail-item-column" style="justify-content: flex-end;">
                        规格/批号
                    </div>
                    <div class="detail-item-column" style="justify-content: flex-end;">
                        数量
                    </div>
                </div>
                <div class="detail-content">

                    <!-- <div class="header-item" style="border-bottom: 1px dashed rgb(244,244,244);">
                        <div class="detail-item-column">
                           1231231
                        </div>
                        <div class="detail-item-column">
                           12312312
                        </div>
                        <div class="detail-item-column" style="justify-content: flex-end;">
                            123123
                        </div>
                    </div> -->

                </div>
                <div  class="header-item" >
                    <div class="detail-item-column">
                        合计
                    </div>
                    <div class="detail-item-column">
                        
                    </div>
                    <div class="detail-item-column" style="justify-content: flex-end;" id="HJSL">
                        
                    </div>
                </div>
                <div style="text-align: center;padding: 10px;color:rgb(200,200,200);font-size: 12px;">
                    以上为详情
                </div>
            </div>
            <!-- 页尾部分 -->
            <div class="footer">
                <div class="footer-back footer-btn" onclick="onClickBack()">
                    返回
                </div>
                
                <div class="footer-submit footer-btn" id="confirm-btn">
                    允许提货
                </div>
            </div>
        </div>
    </body>
</html>